import React, { FC, useState } from "react";
import styles from "./index.module.scss";
import { Button, Space, Tag, Popconfirm, Modal, message } from "antd";
import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  ExclamationOutlined,
  LineChartOutlined,
  StarOutlined,
} from "@ant-design/icons";
import { useNavigate, Link } from "react-router-dom";
import { useRequest } from "ahooks";
import { duplicateQuestionService, updateQuestionListService } from "../../service/questions";

const { confirm } = Modal


export type QuestionType = {
  _id: string;
  title: string;
  isStar: boolean;
  isPublished: boolean;
  answerCount: number;
  createdAt: string;
};

const QuestionCard: FC<QuestionType> = (props: QuestionType) => {
  const nav = useNavigate();
  const { _id, title, createdAt, answerCount, isPublished, isStar } = props;

  //修改 标星
  const [ isStarState, setIsStarState] = useState(isStar)
  const { loading: changeStarLoading, run: changeStar} = useRequest(async () => {
    await updateQuestionListService(_id, {isStar : !isStarState})
  },{
    manual: true,
    onSuccess() {
      setIsStarState(!isStarState)
      message.success("已更新");
    }
  })
  //复制
  const {loading: duplicateLoading, run: duplicate, } = useRequest(async () => {
     const data = await duplicateQuestionService(_id)
     return data
  },{
    manual: true,
    onSuccess(result: any){
      message.success("复制成功");
      nav(`/question/edit/${result.id}`)
    }
  })
  //删除
  const [ isDeleteState, setIsDeleteState ] = useState(false)
  const { loading: deleteLoading, run: deleteQuestion } = useRequest(
    async () => await updateQuestionListService(_id, {isDelete: true} ),
    {
      manual:true,
      onSuccess(){
        message.success("删除成功")
        setIsDeleteState(true)
      }
    }
  )
  

  function del(){
    confirm({
      title: '确定删除吗？',
      icon:<ExclamationOutlined/>,
      okText:'确定',
      cancelText:'取消',
      onOk() {
        deleteQuestion()
      },
    });
  }
   //已经删除的卡片就不要渲染
  if (isDeleteState) return null
  return (
    <>
      <div className={styles.container}>
        <div className={styles.title}>
          <div className={styles.left}>
            <Link
              to={
                isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`
              }
            >
              <Space>
                {isStarState && <StarOutlined style={{ color: "red" }} />}
                {title}
              </Space>
            </Link>
          </div>
          <div className={styles.right}>
            <Space style={{ margin: "12px" }}>
              {isPublished ? (
                <Tag color="processing">已发布</Tag>
              ) : (
                <Tag>未发布</Tag>
              )}
              <span>答卷：{answerCount}</span>
              {createdAt}
            </Space>
          </div>
        </div>
        <div className={styles["button-container"]}>
          <div className={styles.left}>
            <Space>
              <Button
                icon={<EditOutlined />}
                type="text"
                shape="round"
                size="small"
                onClick={() => nav(`/question/edit/${_id}`)}
              >
                编辑问卷
              </Button>
              <Button
                icon={<LineChartOutlined />}
                type="text"
                shape="round"
                size="small"
                onClick={() => nav(`/question/stat/${_id}`)}
                disabled={!isPublished}
              >
                问卷统计
              </Button>
            </Space>
          </div>
          <div className={styles.right}>
            <Space>
              <Button
                type="text"
                shape="round"
                size="small"
                icon={<StarOutlined />}
                onClick={ changeStar }
                loading={changeStarLoading}
              >
                {isStarState ? "取消收藏" : "收藏"}
              </Button>
              <Popconfirm
                title="确定复制问题"
                okText="确定"
                cancelText="取消"
                onConfirm={duplicate}
                
              >
                <Button
                  type="text"
                  shape="round"
                  size="small"
                  icon={<CopyOutlined />}
                  loading={duplicateLoading}
                >
                  复制
                </Button>
              </Popconfirm>
              <Button
                type="text"
                shape="round"
                size="small"
                icon={<DeleteOutlined />}
                onClick={del}
                loading={deleteLoading}
              >
                删除
              </Button>
            </Space>
          </div>
        </div>
      </div>
    </>
  );
};

export default QuestionCard;
